<template functional>
  <div class="bs-main-layout" :style="{height: props.height || '100%'}">
    <template v-if="$slots.header">
      <div class="bs-main-layout__header">
        <slot name="header"></slot>
      </div>
    </template>
    <template v-if="$slots.default">
      <div class="bs-main-layout__main">
        <slot></slot>
      </div>
    </template>
    <template v-if="$slots.footer">
      <div class="bs-main-layout__footer">
        <slot name="footer"></slot>
      </div>
    </template>
  </div>
</template>

<style lang="scss" scoped>
.bs-main-layout {
  flex: 1;
  display: flex;
  flex-direction: column;

  &__header {
    flex-basis: 50px;
    overflow-y: hidden;
    overflow-x: auto;
    flex-grow: 0;
    flex-shrink: 0;
    padding: 8px 10px 0 10px;
  }

  &__main {
    flex-grow: 1;
    overflow: auto;
    padding: 0 10px 0 10px;
    height: calc(100% - 100px); // 兼容safari子元素设置height百分比不生效问题
  }

  &__footer {
    border-top: 1px solid #e9e9e9;
    flex-basis: 50px;
    overflow-y: hidden;
    overflow-x: auto;
    flex-grow: 0;
    flex-shrink: 0;
    padding: 0 10px 0 10px;
  }
}
</style>